import react, { useState, useEffect } from 'react';
import { Form, Input, Checkbox, Button } from 'antd';
import { useNavigate } from "react-router-dom";//登录页面的跳转
import request from "../utils/request";
import store from '../store';
import React from 'react';


function Login() {
    const navigate = useNavigate();
    const onFinish = async (values) => {
        //登录发起请求
        const { data } = await request.get('/user/login',

            { params: values })
        console.log('data', data)
        //没有权限也可以登录
        if (data.status === 200) {
            store.dispatch({ type: 'login', payload: data.data })
            navigate('/manage')
        }
    };

    return (
        <div className='login-page'>
            <h1>趣学宝典</h1>
            <Form
                name="basic"
                labelCol={{
                    span: 6,
                }}
                wrapperCol={{
                    span: 14,
                }}
                initialValues={{
                    remember: true,
                }}
                onFinish={onFinish}
                autoComplete="off"
            // onFinishFailed={onFinishFailed}失败进入到这可以不要

            >
                <Form.Item
                    label="用户名"
                    name="username"
                    rules={[
                        {
                            required: true,
                            message: '请输入用户名!',
                        },
                    ]}
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    label="密码"
                    name="password"
                    rules={[
                        {
                            required: true,
                            message: '请输入密码!',
                        },
                    ]}
                >
                    <Input.Password />
                </Form.Item>

                <Form.Item
                    name="免登录"
                    valuePropName="checked"
                    wrapperCol={{
                        offset: 6,
                        span: 14,
                    }}
                >
                    <Checkbox>免登录</Checkbox>
                </Form.Item>

                <Form.Item
                    wrapperCol={{
                        offset: 6,
                        span: 16,
                    }}
                >
                    <Button type="primary" htmlType="submit">
                        登录
                    </Button>
                </Form.Item>
            </Form>
        </div>

    );
}


export default Login;